<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="choose-date">

				<image src="/static/日期.svg"></image>
				<view class="date-view" style="font-weight: 550;">自定义</view>
			</view>

			<view class="date-picker">
				<view class="date-btn active" @click="changeDate">2022-02-01</view>
				<view class="date-btn" @click="changeDate">昨天</view>

			</view>
		</view>

		<!-- 数据统计 -->
		<view class="stats-container">
			<view class="stat-item">
				<text class="stat-value">¥414254.23</text>
				<text class="stat-label">收入</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">5355</text>
				<text class="stat-label">订单量</text>
			</view>
		</view>

		<!-- 收入分布饼图 -->
		<view class="chart-container">
			<text class="chart-title">收入分布</text>
			<view class="charts-box" @mouseenter="showTooltip" @mouseleave="hideTooltip">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
				<view class="tooltip" :style="tooltipStyle">{{ tooltipContent }}</view>
			</view>
			<view class="legend">
				<view class="legend-item">
					<view class="legend-color" style="background-color: #1890FF;"></view>
					<text class="legend-text">保养</text>
				</view>
				<view class="legend-item">
					<view class="legend-color" style="background-color: #FAC858;"></view>
					<text class="legend-text">洗车</text>
				</view>
			</view>
		</view>

		<!-- 订单分布柱状图 -->
		<view class="chart-container">
			<text class="chart-title">订单分布</text>
			<view class="charts-box" @mouseenter="showTooltip" @mouseleave="hideTooltip">
				<qiun-data-charts type="column" :opts="columnOpts" :chartData="columnData" />
				<view class="tooltip" :style="tooltipStyle">{{ tooltipContent }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 饼图数据和配置
	const chartData = ref({
		series: [{
			data: [{
					"name": "洗车",
					"value": 563
				},
				{
					"name": "保养",
					"value": 425
				}
			]
		}]
	});

	const opts = ref({
		color: ["#1890FF", "#FAC858"],
		padding: [5, 5, 5, 5],
		enableScroll: false,
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: "#FFFFFF",
				linearType: "custom"
			}
		},
		legend: {
			show: false
		}
	});

	// 柱状图数据和配置
	const columnData = ref({
		categories: ['维修', '保养', '洗车'],
		series: [{
			name: '订单量',
			data: [345, 145, 230]
		}]
	});

	const columnOpts = ref({
		color: ["#1890FF"],
		legend: {
			position: 'top'
		}
	});

	// 日期切换
	const changeDate = (dateType) => {
		console.log(`切换到 ${dateType}`);
	};

	// 提示框相关
	const tooltipContent = ref('');
	const tooltipStyle = ref({
		display: 'none',
		position: 'absolute',
		background: 'rgba(0, 0, 0, 0.7)',
		color: 'white',
		padding: '10rpx',
		borderRadius: '10rpx',
		fontSize: '24rpx',
		pointerEvents: 'none' // 防止提示框干扰鼠标事件
	});

	const showTooltip = (event) => {
		// 这里需要根据图表的交互来更新提示框内容和位置
		// 实际项目中可能需要结合图表的 API 来获取悬停的数据
		// 这里仅做简单示例
		const {
			x,
			y
		} = event.touches[0] || event;
		// tooltipContent.value = '悬停显示的信息'; // 实际项目中替换为从图表获取的数据
		tooltipStyle.value = {
			display: 'block',
			left: `${x}rpx`,
			top: `${y + 20}rpx`
		};
	};

	const hideTooltip = () => {
		tooltipStyle.value.display = 'none';
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.header {
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.header image {
		width: 60rpx;
		height: 60rpx;
	}

	.choose-date {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 20rpx;
		width: 100%;
	}

	.date-view {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		color: blue;
		border: none;
	}



	.date-btn {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		color: blue;
		width: 180rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border: 2rpx solid rgba(0, 123, 255, 0.2);
	}

	.date-btn.active {
		background-color: #1890FF;
		color: white;
	}

	.date-picker {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stats-container {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.stat-item {
		text-align: center;
	}

	.stat-value {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.stat-label {
		font-size: 28rpx;
		color: #666;
	}

	.chart-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		/* 为绝对定位的提示框提供定位上下文 */
	}

	.chart-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.charts-box {
		height: 300rpx;
		width: 100%;
		position: relative;
		/* 为绝对定位的提示框提供定位上下文 */
	}

	.legend {
		display: flex;
		margin-top: 20rpx;
		justify-content: center;
	}

	.legend-item {
		display: flex;
		align-items: center;
		margin: 0 20rpx;
	}

	.legend-color {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.legend-text {
		font-size: 24rpx;
	}

	.tooltip {
		/* 样式在 JS 中动态设置 */
	}
</style>